<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-avatar src="/static/images/avatar.png"></pure-avatar>
			</pj-demo>

			<!-- 显示编辑按钮 -->
			<pj-demo title="显示编辑按钮">
				<pure-avatar
					src="/static/images/avatar.png"
					showEdit
				></pure-avatar>
			</pj-demo>

			<!-- 自定义大小 -->
			<pj-demo title="自定义大小">
				<pure-flex align="flex-end">
					<pure-avatar
						src="/static/images/avatar.png"
						size="100px"
					></pure-avatar>
					<pure-avatar
						src="/static/images/avatar.png"
						size="80px"
					></pure-avatar>
				</pure-flex>
			</pj-demo>

			<!-- 点击预览 -->
			<pj-demo title="点击预览">
				<pure-avatar
					src="/static/images/avatar.png"
					preview
				></pure-avatar>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped></style>
